iT邦幫忙

DAY 26
6

30天掌握Sass語法系列 第 22

30天掌握Sass語法 - (26) 如何讓你的CSS動畫更具動態效果

  • 分享至 

  • xImage
  •  
.box
  height: 30px
  width: 30px
  transition: all 1s
  &:hover
    width: 300px

以上的程式碼的用意是,
當你滑鼠滑過去.box時,
你會發現他會逐漸變成300px,
而不是瞬間就變成300px,
但是有用過的朋友都知道要做出具有生動性的動態效果,
這樣還是不太夠的,
如果我們要像真實物理情況,
例如做一顆球掉到地面後還會彈起來好幾下,
瀏覽者才會覺得你做的東西是生動而不是死板板的,
為了讓動畫看起來具真實感,
我們會透過transition預設的Easing funtion來去實踐,
只要設定他的時間曲線後,就可以做出自己想要的效果出來,


來源:http://easings.net/zh-tw

Yes
如同上述來源連結,
在以往我們做動畫時,
都是選擇看是用javascript與css來實踐,
但由於網頁效能的緣故,
由於javascript是跑CPU、CSS3動畫則是跑繪圖卡GPU,
所以相對來說,使用CSS來做動畫,在效能上會比javascript來好得多,
網頁設計師多少也必須學習該如何使用CSS來做動畫,
以因應各專案的特性,來衡量CSS與javascript的使用比重。
另外CSS3 transition預設只有五種時間漸變效果:
linear:平均速度
ease:很快到漸慢
ease-in:逐漸變快
ease-out:逐漸變慢
ease-in-out:快→慢→快
寫法就是後面在加漸變名稱:

transition: all 1s linear

除了預設這四種外,
你也可以用cubic-bezier()自行設定時間漸變效果,
如下程式碼:

transition: all 1s cubic-bezier(0.250, 0.250, 0.750, 0.750)  //平均速度

當然也有人針對這個東西做了Sass framework,
叫做compass-ceaser-easing
https://github.com/jhardy/compass-ceaser-easing

同時也有demo網頁提供參考,讓您看看想要哪種的動畫效果,
http://matthewlein.com/ceaser/
再搭配Compass CSS3前綴支援,只能用如虎添翼來形容。

安裝方式如下:
1.到Github頁點選右下角的Download下載下來,將stylesheets資料夾裡面的檔案放到你的Sass資料夾。
2.再到你的Sass檔案@import ceaser-easing這個下載下來的Sass檔案。
3.最後再到Demo網站瀏覽你想要的動態效果,將名稱寫進去就可以了,譬如說我要easeInOutBack的效果就打:

@import compass
@import ceaser-easing
.box1
  height: 30px
  +transition(all 1s ceaser($easeInOutBack))  //
  &:hover
    width: 300px

產生出來的code就會變成

.box1 {
  height: 30px;
  -webkit-transition: all 1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -moz-transition: all 1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -o-transition: all 1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
  transition: all 1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.box1:hover {
  width: 300px;
}

如果沒有你想要的動畫效果,
你也可以到demo網頁自己拉你想要的動畫效果,
確認後再把cubic-bezier()的值寫到你的Sass裡面去就ok了,
透過這樣的方式,你就可以開始思考如何將你的網頁更具動態效果,
除了移動位置、寬與高以外,甚至可以設定透明度的漸變效果呢!
如果想了解更多transition的影格效果,
也可瀏覽此文章:http://css3.bradshawenterprises.com/transitions/

於此也附上安裝compass-ceaser-easing的流程教學影片:
Yes


上一篇
30天掌握Sass語法 - (25) 透過index()與nth()來設計網站版本樣式控制管理
下一篇
30天掌握Sass語法 - (27) 使用@if提升@Mixin靈活度,以CSS圖形化為例
系列文
30天掌握Sass語法41
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言